<template>
  <div class="collection-block">
      <div class="block-padding">
          <div class="title">
              <h3>
                  {{tit}}
              </h3>
              <!-- <a href="#" @click="ajax()">更多</a> -->
              <router-link :to="`/more/${tit}`">更多</router-link>
          </div>
          <div class="list clearfix">
              <router-link :to="`/player/${item.id}/${item.name}/${setUrl(item.picUrl)}`" class="item" v-for="item in aaa()" :key="item.id" @click="ajaxPlay(item.id)">
                  <div class="img-warpping">
                      <a><img :src="item.cover?item.cover:item.picUrl" alt=""></a>
                  </div>
                  <div class="main">
                      {{item.name}}
                  </div>
                  <div class="gray">
                      {{item.artistName}}
                  </div>
              </router-link>
          </div>
      </div>
  </div>
</template>

<script>
// import Vue from 'vue'
// import axios from 'axios';
// Vue.prototype.$axios = axios;
export default {
    data() {
        return {
            datalist:[],
            detail: [],
        }
    },
    // mounted(){
    //     this.ajax()
        
    // },
    methods:{
        // ajaxPlay(id){
        //     let url = "http://121.41.51.182:3000/song/url?id="+id;
        //     console.log(id);
        //     return axios({
        //         method: "get",
        //         timeout: 1000 * 30,
        //         url: url,
        //         dataType: "json",
        //         id: id
        //     })
        //         .then((res) => {
        //             this.detail = res.data.data[0].url;
                    // this.detail = JSON.parse(JSON.parse(JSON.stringify(res.request.response)));
                    // console.log(res.data.data[0].url);
        //             console.log(this.detail);
        //             return res;
        //         })
        //         .catch(function (error) {
        //             alert("获取失败，请稍后重试");
        //             console.log(error);
        //         });
        // },
            setUrl(url){
            if(url){
                return encodeURIComponent(url)
            }
        },
        aaa(){
            //这样就解决了请求数据还未返回时就已经被复制给datalist的问题了
            //并且保证mes完整的前提下只取前九个数
            return this.mes.slice(0,9)
            // this.datalist = res.slice(0,9)
            // this.datalist
            // return res.slice(0,9)
        },
//         ajax(url){
//             url = 'http://121.41.51.182:3000/top/mv'
//             console.log(1);
//     return axios({
//       method: 'get',
//       timeout: 1000 * 30,
//       url: url,
//       dataType: 'json'
//     }).then(res => {
//         console.log(res.data.data);
//         this.datalist = res.data.data;
//         this.datalist.splice(9,30)
//       return res.data.data
//     }).catch(function (error) {
//           alert('获取失败，请稍后重试')
//         console.log(error)
// })
//     }
    },
    props:["mes","tit",],
    }
</script>

<style scoped>
img {
    width: 100px;
}
.collection-block {
    background-color: #f8f8f8;
    padding: 5px 0;
}

.block-padding {
    padding: 10px 17px;
    background-color: #fff;
    /* display: flex; */
    /* height: 300px; */
}

.title {
    display: flex;
    margin: 14px 0 18px;
}

.title h3 {
    flex: 1 1 0%;
    display: block;
    font-weight: 700;
    font-size: 20px;
}

.list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* height: 400px; */
}

.list .item {
    /* float: left;
    width: 31.33%; */
    width: 80px;
    flex: 1 0 auto;
    padding: 0 10px;
    margin-bottom: 10px;
}

.clear-padding {
    padding: 0 !important;
}

.main {
    margin-top: 4px;
    font-size: 12px;
    /* float: left; */
    /* 下面这三行可以实现使文本不换行，多余字符变为'...' */
    text-overflow:ellipsis;
     white-space:nowrap; 
     overflow:hidden;
}

.gray {
    font-size: 12px;
    color: #999;
}

.btn-more {
    font-size: 12px;
    text-align: right;
    color: #333;
}

</style>